<template>
  <div class="chat-container">
    <!-- 左侧群组列表 -->
    <div class="groups-sidebar" :class="{ 'collapsed': isGroupsCollapsed, 'expanded': !isGroupsCollapsed }">
      <div class="sidebar-header">
        <div class="header-top">
          <h2 v-show="!isGroupsCollapsed">聊天群组</h2>
          <button class="toggle-btn" @click="toggleGroupsSidebar">
            <i class="fas" :class="isGroupsCollapsed ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
          </button>
        </div>
        <div class="search-box" v-show="!isGroupsCollapsed">
          <input type="text" placeholder="搜索群组..." />
          <i class="fas fa-search"></i>
        </div>
      </div>
      
      <div class="groups-list">
        <div 
          v-for="group in groups" 
          :key="group.id"
          class="group-item"
          :class="{ active: currentGroup?.id === group.id }"
          @click="selectGroup(group)"
          :title="group.name"
        >
          <div class="group-avatar" :style="{ backgroundColor: group.color }">
            {{ group.name.charAt(0) }}
          </div>
          <div class="group-info" v-show="!isGroupsCollapsed">
            <h3>{{ group.name }}</h3>
            <p class="last-message">{{ group.lastMessage }}</p>
          </div>
          <div class="group-meta" v-show="!isGroupsCollapsed">
            <span class="time">{{ formatTime(group.lastMessageTime) }}</span>
            <span v-if="group.unreadCount" class="unread-badge">{{ group.unreadCount }}</span>
          </div>
          <!-- 收起状态下的未读消息提示 -->
          <div v-if="isGroupsCollapsed && group.unreadCount" class="collapsed-unread-badge">
            {{ group.unreadCount }}
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧聊天区域 -->
    <div class="chat-main" @click="handleChatMainClick">
      <div v-if="currentGroup" class="chat-area">
        <!-- 聊天头部 -->
        <div class="chat-header">
          <div class="header-left">
            <button class="mobile-menu-btn" @click="toggleGroupsSidebar">
              <i class="fas fa-bars"></i>
            </button>
            <div class="chat-avatar" :style="{ backgroundColor: currentGroup.color }">
              {{ currentGroup.name.charAt(0) }}
            </div>
            <div class="chat-info">
              <h2>{{ currentGroup.name }}</h2>
              <p>{{ currentGroup.members }} 位成员</p>
            </div>
          </div>
          <div class="header-right">
            <button class="icon-button">
              <i class="fas fa-phone-alt"></i>
            </button>
            <button class="icon-button">
              <i class="fas fa-video"></i>
            </button>
            <button class="icon-button">
              <i class="fas fa-ellipsis-v"></i>
            </button>
          </div>
        </div>

        <!-- 消息区域 -->
        <div class="messages-container" ref="messagesContainer">
          <div 
            v-for="(message, index) in messages" 
            :key="index"
            class="message"
            :class="{
              'sent': message.sender === 'me',
              'received': message.sender !== 'me'
            }"
          >
            <div v-if="message.sender !== 'me'" class="message-avatar">
              <div :style="{ backgroundColor: getAvatarColor(message.sender) }">
                {{ message.sender.charAt(0) }}
              </div>
            </div>
            <div class="message-content">
              <div v-if="message.sender !== 'me'" class="message-sender">{{ message.sender }}</div>
              <div class="message-bubble">
                {{ message.content }}
              </div>
              <div class="message-time">{{ formatMessageTime(message.timestamp) }}</div>
            </div>
          </div>
        </div>

        <!-- 消息输入区域 -->
        <div class="message-input-area">
          <div class="input-actions">
            <button class="action-button">
              <i class="fas fa-plus"></i>
            </button>
            <button class="action-button">
              <i class="fas fa-paperclip"></i>
            </button>
            <button class="action-button">
              <i class="fas fa-image"></i>
            </button>
          </div>
          <input 
            type="text" 
            v-model="newMessage" 
            placeholder="输入消息..." 
            @keyup.enter="sendMessageToGroup"
          />
          <button class="send-button" @click="sendMessageToGroup">
            <i class="fas fa-paper-plane"></i>
          </button>
        </div>
      </div>
      
      <div v-else class="empty-chat">
        <div class="empty-content">
          <i class="fas fa-comments"></i>
          <h2>选择一个群组开始聊天</h2>
          <p>从左侧选择一个群组查看聊天记录</p>
        </div>
      </div>
    </div>

    <!-- 移动端遮罩层 -->
    <div v-if="showMobileOverlay" class="mobile-overlay" @click="closeMobileGroups"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, watch } from 'vue'
import { useUserIdStore } from '@/stores/UserId';
import { 
  selectGroupsByUserId, 
  selectMessagesByGroupId, 
  sendMessage, 
  markGroupMessagesAsRead,
  type ChatGroup,
  type ChatMessage 
} from '@/http/Chat';
import { message } from '@/utils/message';

const userIdStore = useUserIdStore();

// 使用后端数据类型
interface DisplayGroup {
  id: number;
  name: string;
  lastMessage: string;
  lastMessageTime: number;
  unreadCount: number;
  members: number;
  color: string;
  type?: string;
  shopId?: number;
  userId?: number;
}

interface DisplayMessage {
  sender: string;
  content: string;
  timestamp: number;
  senderType?: string;
}

// 群组数据
const groups = ref<DisplayGroup[]>([])
const loading = ref(true)

const currentGroup = ref<DisplayGroup | null>(null)

const messages = ref<DisplayMessage[]>([])
const newMessage = ref('')
const messagesContainer = ref<HTMLElement | null>(null)

// 将后端数据转换为前端显示格式
const convertApiGroupToDisplay = (apiGroup: ChatGroup): DisplayGroup => {
  const colors = ["#FF6B6B", "#4ECDC4", "#FFD166", "#6A0572", "#1A535C", "#06D6A0", "#118AB2"];
  const colorIndex = (apiGroup.id || 0) % colors.length;
  
  return {
    id: apiGroup.id || 0,
    name: apiGroup.name || '未命名群组',
    lastMessage: apiGroup.lastMessage || '',
    lastMessageTime: apiGroup.lastMessageTime ? new Date(apiGroup.lastMessageTime).getTime() : Date.now(),
    unreadCount: apiGroup.unreadCount || 0,
    members: apiGroup.members || 2,
    color: colors[colorIndex],
    type: apiGroup.type || undefined,
    shopId: apiGroup.shopId || undefined,
    userId: apiGroup.userId || undefined
  };
};

const convertApiMessageToDisplay = (apiMessage: ChatMessage): DisplayMessage => {
  return {
    sender: apiMessage.sender || '未知用户',
    content: apiMessage.content || '',
    timestamp: apiMessage.timestamp || Date.now(),
    senderType: apiMessage.senderType || undefined
  };
};

// 加载群组数据
const loadGroups = async () => {
  loading.value = true;
  try {
    console.log('🚀 开始加载聊天群组...');
    
    if (!userIdStore.currentUserId) {
      console.log('⚠️ 用户未登录');
      message.warning('请先登录');
      return;
    }

    // 获取用户的聊天群组
    const response = await selectGroupsByUserId(userIdStore.currentUserId, 1, 50);
    
    if (response.data && response.data.list) {
      console.log('✅ 群组数据加载成功:', response.data.list.length, '个群组');
      
      // 转换数据格式
      const convertedGroups = response.data.list.map(convertApiGroupToDisplay);
      groups.value = convertedGroups;
      
      console.log('📊 转换后的群组数据:', convertedGroups);
      
      // 默认选中第一个群组
      if (convertedGroups.length > 0) {
        selectGroup(convertedGroups[0]);
      }
    } else {
      console.log('⚠️ 没有聊天群组');
      groups.value = [];
      message.info('暂无聊天群组');
    }
  } catch (error: any) {
    console.error('❌ 加载群组数据失败:', error);
    
    if (error.message) {
      message.error(`加载群组数据失败: ${error.message}`);
    } else {
      message.error('加载群组数据失败，请检查网络连接');
    }
    
    // 错误时可以使用静态数据作为备用
    // groups.value = staticGroups.value;
    // if (groups.value.length > 0) {
    //   selectGroup(groups.value[0]);
    // }
  } finally {
    loading.value = false;
  }
};

const selectGroup = async (group: DisplayGroup) => {
  currentGroup.value = group
  await loadMessagesForGroup(group.id)
  
  // 标记群组消息为已读
  if (group.unreadCount > 0) {
    try {
      await markGroupMessagesAsRead(group.id);
      group.unreadCount = 0;
    } catch (error) {
      console.warn('标记消息已读失败:', error);
    }
  }
}

const loadMessagesForGroup = async (groupId: number) => {
  try {
    console.log('🔄 加载群组消息:', groupId);
    
    const response = await selectMessagesByGroupId(groupId, 1, 50);
    
    if (response.data && response.data.list) {
      console.log('✅ 消息加载成功:', response.data.list.length, '条消息');
      
      // 转换消息数据格式
      const convertedMessages = response.data.list.map(convertApiMessageToDisplay);
      messages.value = convertedMessages;
      
      console.log('📊 转换后的消息数据:', convertedMessages);
    } else {
      console.log('⚠️ 没有消息数据');
      messages.value = [];
    }
  } catch (error: any) {
    console.error('❌ 加载消息失败:', error);
    
    // 错误时使用静态数据作为备用
    // loadStaticMessagesForGroup(groupId);
    messages.value = [];
  }
}

// 发送消息
const sendMessageToGroup = async () => {
  if (newMessage.value.trim() === '' || !currentGroup.value) return
  
  try {
    console.log('📤 发送消息:', newMessage.value);
    
    // 发送到后端
    const messageData = {
      relaGroupId: currentGroup.value.id,
      sender: '我',
      senderType: 'user',
      content: newMessage.value,
      messageType: 'text',
      timestamp: Date.now(),
      isRead: false
    };
    
    await sendMessage(messageData);
    
    // 添加到本地消息列表
    messages.value.push({
      sender: "我",
      content: newMessage.value,
      timestamp: Date.now()
    });
    
    newMessage.value = '';
    
    // 更新群组的最后消息
    currentGroup.value.lastMessage = messageData.content;
    currentGroup.value.lastMessageTime = Date.now();
    
    console.log('✅ 消息发送成功');
    
    // 模拟回复
    setTimeout(() => {
      if (messages.value.length > 0 && currentGroup.value) {
        const names = ["商家", "骑手", "客服"]
        const randomName = names[Math.floor(Math.random() * names.length)]
        messages.value.push({
          sender: randomName,
          content: `自动回复: 订单较多，请稍等哦`,
          timestamp: Date.now()
        })
        
        scrollToBottom()
      }
    }, 1000)
  } catch (error: any) {
    console.error('❌ 发送消息失败:', error);
    message.error('发送消息失败: ' + (error.message || '网络错误'));
  }
}

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

// 格式化时间
const formatTime = (timestamp: number) => {
  const date = new Date(timestamp)
  const now = new Date()
  
  if (date.toDateString() === now.toDateString()) {
    // 今天
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
  } else if (date.getDate() === now.getDate() - 1) {
    // 昨天
    return '昨天'
  } else {
    // 更早
    return date.toLocaleDateString([], { month: 'numeric', day: 'numeric' })
  }
}

// 格式化消息时间
const formatMessageTime = (timestamp: number) => {
  return new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
}

// 获取头像颜色
const getAvatarColor = (name: string) => {
  const colors = ["#FF6B6B", "#4ECDC4", "#FFD166", "#6A0572", "#1A535C", "#06D6A0", "#118AB2"]
  const index = name.charCodeAt(0) % colors.length
  return colors[index]
}

// 响应式状态
const isGroupsCollapsed = ref(false)
const showMobileOverlay = ref(false)
const isMobile = ref(false)

// 检测屏幕尺寸
const checkScreenSize = () => {
  isMobile.value = window.innerWidth <= 768
  if (isMobile.value) {
    isGroupsCollapsed.value = true
  }
}

onMounted(() => {
  checkScreenSize()
  window.addEventListener('resize', checkScreenSize)
  // 加载群组数据
  loadGroups()
})

// 切换群组侧边栏
const toggleGroupsSidebar = () => {
  isGroupsCollapsed.value = !isGroupsCollapsed.value
  if (isMobile.value && !isGroupsCollapsed.value) {
    showMobileOverlay.value = true
  } else {
    showMobileOverlay.value = false
  }
}

// 点击聊天主区域时收起群组列表（仅在移动端）
const handleChatMainClick = () => {
  if (isMobile.value && !isGroupsCollapsed.value) {
    isGroupsCollapsed.value = true
    showMobileOverlay.value = false
  }
}

// 关闭移动端群组列表
const closeMobileGroups = () => {
  isGroupsCollapsed.value = true
  showMobileOverlay.value = false
}

// 监听消息变化，滚动到底部
watch(messages, () => {
  scrollToBottom()
}, { deep: true })
</script>

<style scoped>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.chat-container {
  display: flex;
  height: 100vh;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  overflow: hidden;
}

/* 左侧群组列表样式 */
.groups-sidebar {
  width: 320px;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: all 0.3s ease;
  position: relative;
}

.groups-sidebar.collapsed {
  width: 70px;
}

.groups-sidebar.expanded {
  width: 320px;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.toggle-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #666;
}

.toggle-btn:hover {
  background: #4ECDC4;
  color: white;
}

.sidebar-header h2 {
  color: #333;
  font-weight: 600;
  margin: 0;
}

.search-box {
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  font-size: 14px;
  transition: all 0.3s;
}

.search-box input:focus {
  outline: none;
  background-color: white;
  border-color: #4ECDC4;
  box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
}

.search-box i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.groups-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
}

.group-item {
  display: flex;
  padding: 15px 20px;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 4px solid transparent;
  position: relative;
  align-items: center;
}

.groups-sidebar.collapsed .group-item {
  padding: 15px 10px;
  justify-content: center;
}

.group-item:hover {
  background-color: rgba(245, 245, 245, 0.8);
}

.group-item.active {
  background-color: rgba(78, 205, 196, 0.15);
  border-left: 4px solid #4ECDC4;
}

.group-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 20px;
  margin-right: 15px;
  flex-shrink: 0;
}

.groups-sidebar.collapsed .group-avatar {
  margin-right: 0;
}

.group-info {
  flex: 1;
  min-width: 0;
}

.group-info h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-info .last-message {
  font-size: 13px;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.group-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 10px;
}

.group-meta .time {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.unread-badge {
  background-color: #FF6B6B;
  color: white;
  font-size: 12px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.collapsed-unread-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #FF6B6B;
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* 右侧聊天区域样式 */
.chat-main {
  flex: 1;
  display: flex;
  background-color: #f0f2f5;
  position: relative;
  overflow: hidden;
}

.chat-area {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.empty-chat {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
}

.empty-content i {
  font-size: 80px;
  color: #4ECDC4;
  margin-bottom: 20px;
}

.empty-content h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.empty-content p {
  font-size: 16px;
  color: #777;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 8px;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1;
}

.header-left {
  display: flex;
  align-items: center;
}

.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 10px;
  color: #666;
  transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
  background: #4ECDC4;
  color: white;
}

.chat-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 20px;
  margin-right: 15px;
}

.chat-info h2 {
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.chat-info p {
  font-size: 14px;
  color: #777;
}

.header-right {
  display: flex;
}

.icon-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: #f5f5f5;
  color: #555;
  margin-left: 10px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-button:hover {
  background-color: #4ECDC4;
  color: white;
}

.messages-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f5f5f5"/><path d="M0 50 L100 50 M50 0 L50 100" stroke="%23e0e0e0" stroke-width="1"/></svg>');
  background-size: 20px 20px;
}

.message {
  display: flex;
  margin-bottom: 20px;
  max-width: 80%;
}

.message-avatar {
  margin-right: 10px;
}

.message-avatar div {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.message-content {
  display: flex;
  flex-direction: column;
}

.message-sender {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: 18px;
  position: relative;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.message-time {
  font-size: 11px;
  color: #999;
  margin-top: 5px;
}

/* 接收的消息 */
.message.received {
  align-self: flex-start;
}

.message.received .message-bubble {
  background-color: white;
  border-top-left-radius: 5px;
}

/* 发送的消息 */
.message.sent {
  align-self: flex-end;
}

.message.sent .message-content {
  align-items: flex-end;
}

.message.sent .message-bubble {
  background-color: #4ECDC4;
  color: white;
  border-bottom-right-radius: 5px;
}

.message-input-area {
  display: flex;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.95);
  border-top: 1px solid #eee;
  align-items: center;
}

.input-actions {
  display: flex;
  margin-right: 10px;
}

.action-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  color: #777;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-button:hover {
  background-color: #f5f5f5;
  color: #4ECDC4;
}

.message-input-area input {
  flex: 1;
  padding: 12px 20px;
  border-radius: 25px;
  border: 1px solid #ddd;
  font-size: 15px;
  transition: all 0.3s;
}

.message-input-area input:focus {
  outline: none;
  border-color: #4ECDC4;
  box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
}

.send-button {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: none;
  background-color: #4ECDC4;
  color: white;
  margin-left: 10px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-button:hover {
  background-color: #3ab9b0;
  transform: scale(1.05);
}

/* 移动端遮罩层 */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: none;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .groups-sidebar {
    width: 280px;
  }
  
  .groups-sidebar.collapsed {
    width: 60px;
  }
}

@media (max-width: 768px) {
  .chat-container {
    position: relative;
  }
  
  .groups-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 280px;
    z-index: 1001;
    transform: translateX(-100%);
  }
  
  .groups-sidebar.expanded {
    transform: translateX(0);
  }
  
  .groups-sidebar.collapsed {
    transform: translateX(-100%);
    width: 280px;
  }
  
  .mobile-overlay {
    display: block;
  }
  
  .mobile-menu-btn {
    display: flex;
  }
  
  .message {
    max-width: 90%;
  }
  
  .messages-container {
    padding: 15px;
  }
  
  .message-input-area {
    padding: 10px;
  }
  
  .input-actions {
    margin-right: 5px;
  }
  
  .action-button {
    width: 35px;
    height: 35px;
  }
  
  .send-button {
    width: 40px;
    height: 40px;
    margin-left: 5px;
  }
}

@media (max-width: 480px) {
  .groups-sidebar {
    width: 260px;
  }
  
  .chat-header {
    padding: 8px;
  }
  
  .chat-info h2 {
    font-size: 16px;
  }
  
  .chat-info p {
    font-size: 12px;
  }
  
  .header-right .icon-button {
    width: 35px;
    height: 35px;
    margin-left: 5px;
  }
  
  .message-bubble {
    padding: 10px 14px;
    font-size: 14px;
  }
  
  .input-actions {
    display: none;
  }
}
</style>